<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css切换</title>
<style type="text/css">
	 body{
	 	margin:0; 
	 	font-size:12px; 
	 	background:#666;
	 }
	 #box{
	 	width:400px; 
	 	height:300px; 
	 	margin:100px auto 0;
	 }
	 #tab_nav{
	 	margin:0; 
	 	padding:0; 
	 	height:25px; 
	 	line-height:24px;
	 }
	 #tab_nav li{
	 	float:left; 
	 	margin:0 3px; 
	 	list-style:none; 
	 	border:1px solid #999; 
	 	border-bottom:none; 
	 	height:24px; 
	 	width:60px; 
	 	text-align:center; 
	 	background:#FFF;
	 }
	 a{font:bold 14px/24px "微软雅黑", Verdana, Arial, Helvetica, sans-serif; color:green; text-decoration:none;
	}
	 a:hover{
	 	color:red;
	 }
	 #tab_content{
	 	width:398px; 
	 	height:273px; 
	 	border:1px solid #999; 
	 	font:bold 4em/273px "微软雅黑", Verdana, Arial, Helvetica, sans-serif; text-align:center; background:#FFF; 
	 	overflow:hidden;
	 }
	 #t_1,#t_2,#t_3{
	 	width:100%; 
	 	height:273px;
	 }
</style>
</head>

<body>
<div id="box">
 <ul id="tab_nav">
     <li><a href="#t_1">tab_1</a></li>
        <li><a href="#t_2">tab_2</a></li>
        <li><a href="#t_3">tab_3</a></li>
    </ul>
    <div id="tab_content">
     <div id="t_1">tab_a</div>
        <div id="t_2">tab_b</div>
        <div id="t_3">tab_c</div>
    </div>
</div>
</body>
</html>